<template>
  <a-card>
    <a-form-model
      ref="ruleForm"
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      ><!-- 顶部信息 -->

      <a-row>
        <a-table
          :columns="columns"
          :data-source="data"
          bordered
          :scroll="{ x: 2000 }"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <span slot="actionPhoto" slot-scope="text, record">
            <a @click="imageModal(record)">
              <span>点击显示</span>
            </a>
          </span>
         
          <!-- <template slot="operation" slot-scope="text, record">
            <a type="primary" @click="detailModal(record)"> 修改 </a>&nbsp;
            <a-divider type="vertical" />
            <a-popconfirm
              ok-text="确定"
              cancel-text="取消"
              @confirm="onDelete(record)"
            >
              <template slot="title">
                <p>确定删除？</p>
              </template>
              <a type="danger"> 删除 </a>
            </a-popconfirm>
          </template> -->
        </a-table>
      </a-row>
    </a-form-model>
    <a-modal v-model="imagevisible" title="图片显示" :footer="null">
      <div v-for="item in fileList" :key="item">
        <img style="width: 100%" :src="item" />
      </div>
    </a-modal>
  </a-card>
</template>
<script>
import { ProblemFeedBackHttp } from "@/services/modules/ProblemFeedbackSystem";
const FeedBackHttp = new ProblemFeedBackHttp();
import { getStaticFileURL } from "@/services/modules/common.js";
// import moment from "moment"; //日期格式
const columns = [
  {
    title: "编号",
    dataIndex: "key",
    key: "key",

    width: 80,
    fixed: "left",

    align: "center",
  },

  {
    title: "反馈日期",
    dataIndex: "date",
    width: 110,

    fixed: "left",

    align: "center",
  },
  {
    title: "提交部门",
    dataIndex: "deptId_dictText",
    width: 150,

    fixed: "left",

    align: "center",
  },
  {
    title: "提交人",
    dataIndex: "submitter_dictText",
    // width: '40%',
    align: "center",
  },
  {
    title: "系统名称",
    dataIndex: "systemName",
    // width: '40%',
    align: "center",
  },
  {
    title: "反馈页面",
    dataIndex: "feedbackPage",
    // width: '100px',
    align: "center",
  },
  {
    title: "问题描述",
    dataIndex: "problemDescription",
    // width: '100px',
    align: "center",
  },
  {
    title: "照片显示",
    dataIndex: "url",
    // width: '40%',
    align: "center",
    scopedSlots: { customRender: "actionPhoto" },
  },

  {
    title: "问题类别",
    dataIndex: "problemCategory",
    // width: '40%',
    align: "center",
    scopedSlots: { customRender: "problemCategory" },
  },
  {
    title: "信息部审核意见",
    dataIndex: "auditOpinion",
    // width: '40%',
    align: "center",
    scopedSlots: { customRender: "auditOpinion" },
  },
  {
    title: "信息部审核状态",
    dataIndex: "status",
    // width: '40%',
    align: "center",
    scopedSlots: { customRender: "status" },
  },

  {
    title: "备注",
    dataIndex: "remarks",
    // width: '40%',
    align: "center",
    scopedSlots: { customRender: "remarks" },
  },
  {
    title: "问题处理状态",
    dataIndex: "isDone",
    // width: '40%',
    align: "center",
    scopedSlots: { customRender: "isDone" },
  },

  // {
  //   title: "操作",
  //   dataIndex: "operation",
  //   align: "center",
  //   scopedSlots: { customRender: "operation" },
  // },
];

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
export default {
  data() {
    return {
      problemCategoryList: ["新增需求", "更改需求", "系统缺陷"],
      statusList: ["审核通过", "审核不通过", "审核中"],
      isDoneList: ["正在进行", "是", "否"],

      columns, //列名
      data: [{ key: 1, id: 1 }], //数据
      visible: false, //修改弹窗
      imagevisible: false, //图片显示弹窗

      // ---------- 分页使用 -------------
      pagination: {
        total: 0,
        current: 1,
        pageSize: 5, //每页中显示10条数据
        showSizeChanger: true,
        // pageSizeOptions: ["5"], //每页中显示的数据
        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
      },
      queryParam: {
        //查询参数
        page: 1, //第几页
        size: 5, //每页中显示数据的条数
        hosName: "",
        hosCode: "",
        province: "",
        city: "",
      },

      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      layout: {
        labelCol: { span: 10 },
        wrapperCol: { span: 12 },
      },

      form: {
        //查询条件
        date: undefined,
        systemName: "",
        problemCategory: "",
        isDone: "",
      },
      //详情数据
      xiangqingForm: [],
      // 上传图片字段
      previewVisible: false,
      previewImage: "",
      fileList: [], //图片列表
      startDate: "", //开始时间
      endDate: "", //结束时间
    };
  },
  mounted() {
    this.getInfo();
    // this.getUserByToken();
    this.getdept();
  },
  methods: {
    onDelete(record) {
      console.log("进来！！！");
      console.log("record", record);
      if (record.status == "审核中") {
        FeedBackHttp.deleteProblemInfo("?id=" + record.id).then((res) => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.getInfo();
          }
        });
      } else {
        this.$message.error("信息部已经对此数据进行操作，请联系信息部进行删除");
      }
    },
    getdept() {
      console.log("this.$store.state", this.$store.state);
      this.form.deptId = this.$store.state.user.departments[0].id; //提交部门id是string型
      this.form.deptIdName = this.$store.state.user.departments[0].departName; //提交部门name
      console.log("this.form.submitterName", this.form.submitterName);
    },

    // 图片函数
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
    callback(key) {
      console.log(key);
    },

    // 点击修改显示修改弹窗
    detailModal(record) {
      console.log("------record-------", record);
      this.visible = true;
      this.xiangqingForm = record;
    },

    // 点击确定后的回调
    handleOk() {
      console.log("----data---", this.xiangqingForm);
      let temp = {
        id: this.xiangqingForm.id,
        isDone: this.xiangqingForm.isDone,
        remarks: this.xiangqingForm.remarks,
      };
      console.log("temp", temp);
      FeedBackHttp.updateProblemInfo(temp).then((res) => {
        console.log("-----res---", res);
        console.log("更新成功");
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.getInfo();
        } else {
          this.$message.error("修改失败");
        }
      });

      this.visible = false;
    },

    // 点击显示图片
    imageModal(record) {
      console.log("------record-----------------", record);
      this.imagevisible = true;
      this.fileList = [];
      let array = [];
      array = record.url.split(";");
      console.log("---->", array);
      for (let i = 0; i < array.length; i++) {
        this.fileList.push(getStaticFileURL(array[i]));
        console.log("getStaticFileURL", getStaticFileURL(array[i]));
      }

      console.log("-------this.fileList-----", this.fileList);
    },
    // 删除该行数据
    // onDelete(key) {
    //   const newdata = [...this.data];
    //   this.data = newdata.filter((item) => item.key !== key);
    // },

    //————————————————————————分页查询：开始——————————————————————————————
    // ---------- 分页函数 -------------
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.queryParam.page = pagination.current;
      this.queryParam.size = pagination.pageSize;

      this.Search();
    },
    // 1. 获取列表函数,该函数的作用是获取页面上显示的表格
    // 获取列表设置默认参数:分页为 1 的参数
    getInfo(queryPath = "?pageNo=1" + "&systemName=" + "仓储管理系统") {
      // getList(queryPath) {
      console.log("我进来了！");
      this.data = []; // 重置 table 的 dataSource 数据
      FeedBackHttp.getProblemPersionList(queryPath).then((res) => {
        console.log("res列表getJiJianYuanDan:::", res);
        // 设置分页
        const pagination = { ...this.pagination };
        pagination.total = res.result.total;
        pagination.pageSize = res.result.size;
        this.pagination = pagination;
        // 渲染数据,把接收的数据渲染到table中
        this.data = res.result.records;

        for (let i = 0; i < res.result.records.length; i++) {
          this.data[i].id = res.result.records[i].id;
          this.data[i].key = (res.result.current - 1) * 10 + i + 1; //序号;
        }
      });
    },

    // 2. 获取查询条件 函数,该函数会返回当前的查询条件， 搜索栏查询条件 + 分页的页码
    getQueryPath() {
      let queryPath =
        "?pageNo=" + this.queryParam.page + "&systemName=" + "仓储管理系统";
      return queryPath; // 返回的查询条件
    },
    // 3. 重置当前页码及页码参数
    resetPagination() {
      this.pagination = {
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据
        showSizeChanger: true,
        // pageSizeOptions: ["5"], //每页中显示的数据
        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
      };
      //查询参数
      this.queryParam = {
        //查询参数
        page: 1, //第几页
        size: 5, //每页中显示数据的条数
        hosName: "",
        hosCode: "",
        province: "",
        city: "",
      };
    },
    // 4、查询按钮触发函数——单独写，目的是在页码不为1时，点击查询，页码自动归1
    getsearch1() {
      this.resetPagination(); //重置页码和参数
      //重置按钮触发函数
      // this.resetForm();
      // 获取目前选择好的查询条件
      let queryPath = this.getQueryPath();
      console.log("当前的查询路径为:::", queryPath);
      this.getInfo(queryPath);
      // this.resetPagination(); // 查询完后 需要重置页码和参数
    },
    // 5. 供分页调用的查询函数
    Search() {
      // 获取目前选择好的查询条件
      let queryPath = this.getQueryPath();
      // console.log("当前的查询路径为:::",queryPath);
      this.getInfo(queryPath);
      //this.resetPagination(); // 查询完后 需要重置页码和参数
    },
    // 6. 重置按钮触发函数
    resetForm() {
      this.resetPagination();
      this.getInfo();
      console.log("重置成功");
      this.form = {
        //查询条件
        date: undefined,
        systemName: "",
        problemCategory: "",
        isDone: "",
      };
      this.startDate = ""; //开始时间
      this.endDate = ""; //结束时间
    },

    //————————————————————————分页查询：结束——————————————————————————————
  },
};
</script>
<style scoped></style>
